<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.imageviewer.css"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
		<link rel="stylesheet" type="text/css" href="css/chat.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav title-bar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left icon-arrowleft"></a>
			<a id="openMenu" class="mui-icon mui-icon-right-nav mui-pull-right icon-optionright">…</a>
			<h1 id="chat_friend_nickname" class="mui-title title-content">个人头像</h1>
		</header>
		<pre id='h'></pre>
		<div id="msg-outer" class="mui-content">
			<div id='msg-list'>
				<!-- <div class="msg-item" msg-type="" msg-content="">
					<img class="friend-face-image msg-user-img" src="image/helmos.png" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
							<img class="msg-content-image" src="image/arrow.jpg" style="max-width: 100px;" />
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				<div class="msg-item msg-item-self" msg-type="" msg-content="">
					<img class="my-face-image msg-user msg-user-img" src="plugin/v3.1.6/images/picture.jpg" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
							拍的真好看
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				<div class="msg-item msg-item-self" msg-type="" msg-content="">
					<i class="msg-user mui-icon mui-icon-person"></i>
					<div class="msg-content">
						<div class="msg-content-inner">
							<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
							<span class="play-state">点击播放</span>
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				<div class="msg-item" msg-type="" msg-content="">
					<img class="friend-face-image msg-user-img" src="image/helmos.png" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
							<img class="msg-content-image" src="image/arrow.jpg" style="max-width: 100px;" />
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div> -->
			</div>
		</div>
		
		<footer>
			<!-- <div class="footer-left">
				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div> -->
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
				<!-- <button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button> -->
			</div>
			<label for="" class="footer-right">
				<!-- <i id='msg-type' class="mui-icon mui-icon-mic"></i> -->
				<button id='msg-send' type="button" class='mui-button mui-btn-grey'>发送</button>
			</label>
		</footer>
		<!-- <div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div> -->
		<script src="js/mui.js"></script>
		<script src="js/mui.imageViewer.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.init();
			
			//(function($, doc) {
				// 聊天信息框
				var msgListDiv;
				var friendUserinfo;
				var userinfo;
				var chatListWebview;
				mui.plusReady(function() {
					// 获取当前页面webview
					var currentWebview = plus.webview.currentWebview();
					// 设置聊天页面的软键盘样式
					currentWebview.setStyle({
						softinputMode: "adjustResize"
					});
					
					// 获取上一个页面传过来的聊天好友信息
					friendUserinfo = currentWebview.friendUserinfo;
					// 标题改为朋友的昵称
					document.getElementById("chat_friend_nickname").innerHTML = friendUserinfo.friendNickname;
					/* mui(".friend-face-image").each(function() {
						this.src = app.imgServerUrl + friendUserinfo.friendFaceImage;
					}); */
					
					// 获取用户全局对象
					userinfo = app.getGlobalUserInfo();
					/* mui(".my-face-image").each(function() {
						this.src = app.imgServerUrl + userinfo.faceImage;
					}); */
					// 获取聊天信息框
					msgListDiv = document.getElementById("msg-list");
					
					// 加载历史聊天记录，并渲染到聊天框中
					loadChatHistory();
					
					// 设置进入聊天界面的时候，自动滚动到最后一条
					resizeScreen();
					
					// 监听当前窗口的resize事件
					window.addEventListener("resize", function() {
						resizeScreen();
						msgListDiv.parentNode.style.paddingBottom = "80px";
					});
					
					// 获取聊天输入框
					var msgTextArea = document.getElementById("msg-text");
					// 获取发送按钮
					var msgSendBtn = document.getElementById("msg-send");
					// 监听用户输入，使得msgSendBtn按钮变色
					msgTextArea.addEventListener("input", function() {
						// 获取聊天框中的内容
						var msg = this.value;
						// 输入框不为空，按钮变成绿色，否则变成灰色
						if(app.isNotNull(msg)) {
							msgSendBtn.classList.remove("mui-btn-grey");
							msgSendBtn.classList.add("mui-btn-green");
						} else {
							msgSendBtn.classList.add("mui-btn-grey");
							msgSendBtn.classList.remove("mui-btn-green");
						}
					});
					
					// 获取聊天列表的webview，用于调用WebSocket聊天模块
					chatListWebview = plus.webview.getWebviewById("chatList.html");
					
					// 给发送消息按钮添加点击事件
					msgSendBtn.addEventListener("tap", function() {
						// 发送之前先判断网络的状态
						if(!app.isConnectNetWork()) {
							app.showToast("设备没有联网，请联网后重试...", "error");
							return;
						}
						
						var msg = msgTextArea.value;
						if(!app.isNotNull(msg)) {
							return;
						}
						// 发送消息，渲染消息的html到msg div之下
						// 清空消息输入框中的内容
						sendMsg(msg);
						// 清空消息框
						msgTextArea.value = "";
						// 触发消息框的输入事件
						mui.trigger(msgTextArea, "input");
						// 模拟接收消息
						//receiveMsg("你好，我现在不在家里，有事请留言...")
						
						// 构建ChatMsgDTO
						var chatMsgDTO = new app.ChatMsgDTO(userinfo.id, friendUserinfo.friendUserId, msg);
						var dataContentDTO = new app.DataContentDTO(app.MsgActionEnum.CHAT, chatMsgDTO);
						
						// 调用聊天列表webview的WebSocket发送消息到后端
						chatListWebview.evalJS("Chat.wsSendMsg('" + JSON.stringify(dataContentDTO) + "')");
						
						// 保存聊天历史记录到本地缓存
						app.saveUserChatHistory(userinfo.id, friendUserinfo.friendUserId, msg, true);
						// 保存聊天快照记录到本地缓存
						app.saveUserChatSnapshot(userinfo.id, friendUserinfo.friendUserId, msg, true);
					});
				});
				
				function resizeScreen() {
					msgListDiv.scrollTop = msgListDiv.scrollHeight + msgListDiv.offsetHeight;					
				}
				
				/**
				 * 发送消息，渲染消息的html到msg div之下
				 */
				function sendMsg(msg) {
					var msgHtml = getSendMsgHtml(msg);
					msgListDiv.insertAdjacentHTML("beforeend", msgHtml);
					playMsgSound(1);
				}
				
				/**
				 * 接收消息
				 */
				function receiveMsg(msg) {
					var msgHtml = getReceiveMsgHtml(msg);
				    msgListDiv.insertAdjacentHTML("beforeend", msgHtml);
					playMsgSound(2);
				}
				
				/**
				 * 获取发送的消息渲染后的HTML
				 */
				function getSendMsgHtml(msg) {
					return '<div class="msg-item msg-item-self" msg-type="" msg-content="">' +
							   '<img class="my-face-image msg-user msg-user-img" src="' + app.imgServerUrl + userinfo.faceImage + '" alt="" />' +
							   '<div class="msg-content">' +
								   '<div class="msg-content-inner">' +
									   msg +
								   '</div>' +
								   '<div class="msg-content-arrow"></div>' +
							   '</div>' +
							   '<div class="mui-item-clear"></div>' +
						   '</div>';
				}
				/**
				 * 获取接收的消息渲染后的HTML
				 */
				function getReceiveMsgHtml(msg) {
					return '<div class="msg-item" msg-type="" msg-content="">' +
							   '<img class="friend-face-image msg-user-img" src="' + app.imgServerUrl + friendUserinfo.friendFaceImage + '" alt="" />' +
							   '<div class="msg-content">' +
								   '<div class="msg-content-inner">' +
									   msg +
								   '</div>' +
								   '<div class="msg-content-arrow"></div>' +
							   '</div>' +
							   '<div class="mui-item-clear"></div>' +
						   '</div>';
				}
				
				// 播放发送和接收消息的铃声：type == 1 表示发送消息，type == 2表示接收消息
				function playMsgSound(type) {
					var soundPath;
					if(type == 1) {
						soundPath = "mp3/sendMsg.mp3";
					} else {
						soundPath = "mp3/receiveMsg.mp3";
					}
					var audioPlayer = plus.audio.createPlayer(soundPath);
					audioPlayer.play();
				}
				
				/**
				 * 从缓存中加载历史聊天记录
				 */
				function loadChatHistory() {
					var chatHistoryHtmlList = [];
					var chatHistoryList = app.getUserChatHistoryList(userinfo.id, friendUserinfo.friendUserId);
					//console.log("缓存中的内容：" + JSON.stringify(chatHistoryList));
					if(chatHistoryList != null) {
						for(var i = 0; i < chatHistoryList.length; i++) {
							if(chatHistoryList[i].isMyMsg) {
								chatHistoryHtmlList.push(getSendMsgHtml(chatHistoryList[i].msg));
							} else {
								chatHistoryHtmlList.push(getReceiveMsgHtml(chatHistoryList[i].msg));
							}
						}
						//console.log("从缓存中加载历史聊天记录");
						msgListDiv.innerHTML = chatHistoryHtmlList.join("");
					}
				}
			//})(mui, document);
		</script>
	</body>

</html>
